<script setup lang="ts">
import Menu from '@/layouts/Menu/index.vue';
</script>

<template>
  <el-container class="common-layout">
    <el-aside width="200px"><Menu></Menu></el-aside>
    <el-main>
      <router-view v-slot="{ Component }">
        <Transition name="fade" mode="out-in">
          <component :is="Component"></component>
        </Transition>
      </router-view>
    </el-main>
  </el-container>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease;
}

.fade-enter-from,
.fade-leave-active {
  opacity: 0;
}
</style>
<style scoped lang="scss">
.common-layout {
  width: 100%;
  height: 100%;
  background-color: $bg;
}
</style>
